<!-- 充值或提现页面 -->
<template>
    <view class="rechargeOrWithdrawalPage" >
        <view class="topWrap flex between">
            <view class="flex v-center">
                <image src="./static/smallMoneyIcon.svg" style="width: 36rpx;height: 36rpx;"/>
                <text style="margin-left: 18rpx;">{{pageName}}方式</text>
            </view>
            <view class="flex v-center">
                <text>微信</text>
                <image src="./static/rightArrow.svg" style="color: #999999;width: 18rpx;height: 24rpx;margin-left: 16rpx;"/>
            </view>
        </view>
        <view class="centerWrap">
            <view>{{pageName}}金额</view>
            <view class="flex v-center" style="margin-top: 48rpx;">
                <text style="font-size: 72rpx;font-weight: bold;margin-right: 10rpx;">¥</text>
                <view class="inputStyle" :style="{minHeight:'60rpx',fontSize:money?'60rpx':'32rpx',color:money?'':'#999999'}"  @click="isMonokeyboard=true">
                    {{ money?money:'请输入提现金额' }} 
                </view>
            </view>
            <view style="margin: 50rpx 0;" v-if="pInfo.type != wallettype.Recharge">
                <text class="glewText">可提现金额：1500</text>
                <text class="greenText">全部提现</text>
            </view>
            <view style="margin: 50rpx 0;" v-else ></view>
        </view>
        <view class="bottomWrap">
            <view class="bottomContent">
                <text>{{pageName}}记录</text>
                <view @click="onGoDetail" >
                    <text style="color: #999;">查看</text>
                    <image src="./static/rightArrow.svg" style="color: #999999;width: 18rpx;height: 24rpx;margin-left: 16rpx;"/>
                </view>
            </view>
        </view>
        <monokeyboard :show="isMonokeyboard" @change="onChangeKeyboard" @confirm="onConfirm"/>
    </view>
</template>

<script>
import { WALLETTYPE } from '../data/WalletType';
import monokeyboard from './components/mono-keyboard/mono-keyboard.vue';
import { getOpenId, getPrepayOrder } from './services/paymentService';

export default {
    name: 'rechargeOrWithdrawalPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            // 当前页面
            pInfo:{
                type:1,
            },
            // dict
            wallettype:WALLETTYPE,
            isMonokeyboard:true,
            money:""
        };
    },
    methods: {
        //去看记录
        onGoDetail(){
            uni.navigateTo({
                url: 'walletRecordsPage?info='+ encodeURIComponent(JSON.stringify({...this.pInfo}))
            })
        },
        // 键盘数字发生变化
        onChangeKeyboard(momeny){
            console.log(momeny,"---69")
            this.money=momeny
        },
        // 键盘确认
        onConfirm(momeny){
            this.onGetOpenId()
            console.log(momeny,"---71")
        },
        // 获取OpenId
        async onGetOpenId(momeny) {
            try {
                const { code } = await wx.login();
                if (code) {
                    const openInfo = await getOpenId({ code });
                    const prepayOrder = await getPrepayOrder({
                        json: JSON.stringify({ openId: openInfo, balance:this.money}),
                    });
                    // console.log(prepayOrder,"--res")
                    wx.requestPayment({
                        ...prepayOrder,
                        package:prepayOrder.packageVal,
                        success: (res) => {
                            console.log('成功');
                            uni.navigateBack()
                        },
                        fail: (res) => {
                            console.log('fail',res);
                        },
                        complete: (res) => {
                            console.log('complete');
                        },
                    });
                } else {
                    console.log('登录失败！');
                }
            } catch (error) {
                console.error('Error:', error);
            }
        }
    },
    onLoad(option) {
        const info = JSON.parse(decodeURIComponent(option.info)) || {};
        this.pInfo = info;  
        uni.setNavigationBarTitle({ title: info.type == this.wallettype.Recharge ? '钱包充值' : '钱包提现' });
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
   computed:{
        pageName(){
            return this.pInfo.type == this.wallettype.Recharge ? '充值' : '提现'
        }
    },
    components:{
        monokeyboard
    }
};
</script>

<style scoped lang="scss">
    .rechargeOrWithdrawalPage{
        height: calc( 100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top));
        box-sizing: border-box;
        color: #333;
        font-size: 32rpx;
        background-color: #f3f3f3;
        display: flex;
        flex-direction: column;
        .topWrap{
            padding: 64rpx 34rpx;
            border-bottom-right-radius: 24rpx;
            border-bottom-left-radius: 24rpx;
            background-color: #fff;
        }
        .centerWrap{
            margin: 20rpx 0 ;
            padding: 64rpx 64rpx 0 64rpx ;
            background-color: #fff;
            .inputStyle{
                flex:1;
                height: 60rpx;
                display: flex;
                align-items:center;
            }
            
            .glewText{
                color: #999;
                min-width: 264rpx;
                margin-right: 36rpx;
            }
            .greenText{
                color: #37B874;
                text-decoration: underline;
            }
        }
        .bottomWrap{
            flex:1;
            .bottomContent{
                padding: 64rpx 32rpx 64rpx 54rpx;
                display: flex;
                justify-content: space-between;
                background-color: #fff;
                border-radius: 24rpx;
                
            }
        }
    }
</style>